<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    全选/全不选<input type="checkbox" id="checkedAllBox"><br>
    草莓<input type="checkbox" name="items" value="草莓"><br>
    葡萄<input type="checkbox" name="items" value="葡萄"><br>
    荔枝<input type="checkbox" name="items" value="荔枝"><br>
    <input type="button" id="checkedAllBtn" value="全选">
    <input type="button" id="checkedNoBtn" value="全不选">
    <input type="button" id="checkedFanBtn" value="反选">
    <input type="button" id="sendBtn" value="提交">
    <script>
        window.onload = function(){
            var items = document.getElementsByName('items')
            var allBtnEle = document.querySelector('#checkedAllBtn')
            var allBoxEle = document.querySelector('#checkedAllBox')
            allBtnEle.onclick = function(){
                for(var i = 0;i<items.length;i++){
                items[i].checked = true
                }
                allBoxEle.checked = true
            }

            var noBtnEle = document.querySelector('#checkedNoBtn')
            noBtnEle.onclick = function(){
                for(var i = 0;i<items.length;i++){
                items[i].checked = false
                }
                allBoxEle.checked = false

            }

            var fanBtnEle = document.querySelector('#checkedFanBtn')
            fanBtnEle.onclick = function(){
                allBoxEle.checked = true
                for(var i = 0;i<items.length;i++){
                // if(items[i].checked){
                //     items[i].checked = false
                // }else{
                //     items[i].checked = true
                // }
                items[i].checked = !items[i].checked
                if(!items[i].checked){
                        allBoxEle.checked = false
                    }
                }
            }

            var sendBtnEle = document.querySelector('#sendBtn')
            sendBtnEle.onclick = function(){
                for(var i = 0;i<items.length;i++){
                if(items[i].checked){
                    alert(items[i].value)
                }
                }
            }

            allBoxEle.onclick = function(){
                for(var i = 0;i<items.length;i++){
                    items[i].checked = this.checked
                }
            }

            for(var i = 0;i<items.length;i++){
                items[i].onclick = function(){
                    allBoxEle.checked = true
                    for(var j = 0;j<items.length;j++){
                        if(!items[j].checked){
                            allBoxEle.checked = false
                            break;
                        }
                    }
                }
            }
        }
    </script>
</body>
</html>